<template>
    <div class="l-echart-scrollrank" :style="styleSizeName" @click="handleClick">
        <div :class="`animated ${animateValue}`" style="width:100%;height:100%">
            <component :is="option.is" v-if="reload" :style="styleImgName" :config="dataHandle.config"></component>
        </div>
    </div>
</template>

<script>
    import init from "../mixins/common";
    export default {
        mixins: [init],
        data() {
            return {
                isFresh: false,
                key: false,
                reload: true,
                dataHandle: {}
            };
        },
        created() {
            if (!this.option.opacity) this.$set(this.option, 'opacity', 100)
        },
        computed: {
            styleImgName() {
                return Object.assign({
                    width: "100%",
                    height: "100%",
                    transitionProperty: 'all',
                    opacity: this.option.opacity / 100,
                    transform: `rotateX(${this.option.rotateX}deg) rotateY(${this.option.rotateY}deg) rotateZ(${this.option.rotateZ}deg) scale(${this.option.scale})`,
                })
            },
            animateValue: {
                get() {
                    return this.option.animateValue
                },
                set() { },
            },
        },
        watch: {
            fresh: {
                handler() {
                    this.isFresh = true
                    this.updateChart()
                }
            },
            option: {
                handler() {
                    this.updateChart();
                },
                deep: true,
                immediate: true
            }
        },
        methods: {
            updateChart() {
                const optionData = this.$deepClone(this.dataChart);
                let data
                if (this.dataType === 2 && this.valueKey && this.isFresh) {
                    if (optionData && optionData.length > 0) {
                        if (this.option.is === 'dv-water-level-pond') {
                            data = {
                                value: []
                            }
                            optionData.map(t => {
                                data.value.push(t[this.valueKey])
                            })
                        } else if (this.option.is === 'dv-percent-pond') {
                            data = { value: optionData[0][this.valueKey] }
                        }

                    }
                } else {
                    if (this.option.is === 'dv-water-level-pond' && !Array.isArray(optionData.value)) {
                        optionData.value = [optionData.value]
                    }
                    data = optionData
                }
                if (this.option.is === 'dv-water-level-pond') this.waterFormatter(data)
                else this.percentFormatter(data)
                this.isFresh = false
                this.reload = false;
                this.$nextTick(() => {
                    this.reload = true;
                })
            },
            percentFormatter(data) {
                this.dataHandle = {
                    config: {
                        value: data.value,
                        borderWidth: this.option.borderWidth,
                        borderRadius: this.option.borderRadius,
                        borderGap: this.option.borderGap,
                        lineDash: this.option.lineDash,
                        localGradient: this.option.localGradient,
                        colors: this.option.colors,
                        textColor: this.option.textColor,
                        formatter: `{value}${this.option.formatter}`
                    }
                }
            },
            waterFormatter(data) {
                this.dataHandle = {
                    config: {
                        data: data.value,
                        shape: this.option.shape,
                        colors: this.option.colors,
                        waveNum: this.option.waveNum,
                        waveHeight: this.option.waveHeight,
                        waveOpacity: this.option.waveOpacity,
                        formatter: `{value}${this.option.formatter}`
                    }
                }
            },
            handleClick() {
                this.clickFormatter && this.clickFormatter({
                    data: this.dataHandle
                }, this.getItemRefs());
            },
        }
    };
</script>